<!DOCTYPE html>
<html>
<head>
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>New Referral</title>
	<link rel="icon" type="image/gif" href="/assets/img/favicon.gif">
	<!-- <link rel="icon" sizes="196x196" href="/assets/img/casey-icon-196.png">
	<link rel="icon" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<link rel="apple-touch-icon" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<link rel="apple-touch-icon-precomposed" sizes="128x128" href="/assets/img/casey-icon-128.png"> -->
	<!-- style sheets -->
	<link href='//fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="assets/css/myghire-proto-primary.css?v=2" type="text/css" media="screen" charset="utf-8">	
</head>
<body>

<div id="app-wrapper" class="">

	<!-- DIALOGUE WINDOW -->
	<div class="dialogue-container">
		<div class="card dialogue" id="dialogue">
			<div class="dialogue-content clearfix">
				<h3>Are you currently under a non-solicit agreement with this person's company?</h3>
				<p class="">A non-solicit agreement is a document signed with your previous company that restricts you from soliciting either (a) employees and/or (b) customers of a business after leaving the business for a certain period of time. Check your old company contract for details.</p>
			
				<div class="button-container">
					<a class="button" id="dialogue-confirm" href="#">No, let's proceed</a>
					<a class="button button-flat button-secondary" href="home.html">Cancel</a>
				</div>
			</div>
		</div>
		
		<!-- DIALOGUE WINDOW BACKGROUND -->
		<div id="dialogue-background" class="composited-layer dialogue-bg-event"></div>
		
	</div> <!-- end dialogue container -->

	<!-- LEFT SIDE CONTENT SECTION -->
	<div id="left-panel" class="">
		
		<div id="nav-header">
			<a id="logo" href="home.html">
				<img src="assets/img/ghire-logo-32px.svg" alt="My gHire logo">
				<h2 id="app-title">My gHire</h2>
			</a>
		</div>
		
		<nav class="">
		
			<!-- top navigation -->
			<ul class="primary-sitenav">
					<li>
						<a href="home.html" class="selected" title="Your candidates" tabindex="200">
							<span class="icon icon-person"></span>
							<span class="list-description">Your candidates</span>
						</a>
					</li>
		
				</ul>
			
			<!-- bottom navigation -->			
			<ul class="secondary-sitenav">
				<li>
					<a href="" class="" title="How to use this app" tabindex="202">
						<span class="icon icon-help"></span>
						<span class="list-description">Get help</span>
					</a>
				</li>
				<li>
					<a href="" class="" title="Give feedback on this app" tabindex="204">
						<span class="icon icon-feedback"></span>
						<span class="list-description">Give feedback</span>
					</a>
				</li>
			</ul>
			
			<!-- site version indicator -->
			<a class="version-indicator" href="index.html" title="Learn more about this version of the prototype" tabindex="206">
				<span class="icon icon-dogfood"></span>
				<span class="list-description">BARK! CSS Prototype</span>
			</a>
			
		</nav>

		
	</div><!-- end side navigation -->
	
	
	<!-- MAIN CONTENT SECTION -->
	<div id="main-panel">
	
		<!-- FIXED TOP BAR -->
		<div id="app-bar" class="app-bar app-bar-centered">
			
			<div class="column-main">
				<!-- APP BAR LEFT CONTENT -->
				<div class="app-bar-content left">
					<a class="button button-appbar-icon button-close-white" title="Delete this referral" href="home.html" tabindex="52"></a>
					<h1 class="app-bar-title">New referral</h1>
				</div>
				
				<div class="app-bar-content right">
					<!-- <a class="button button-appbar-icon button-trash mobile-only" title="Delete new time off" href="home.html" tabindex="51"></a> -->
					<a class="button button-appbar button-flat" title="Submit this referral"href="home-submit.html" tabindex="50">Submit</a>
				</div>
			
			</div>			
		</div> <!-- end APPBAR container -->


		<!-- MAIN CONTENT SUB-SECTIONS -->
		<div class="column-main" role="main">
		
			<form>
			<fieldset>
			
			<ul class="page-sections">
				
				<h4 class="listheader">Basic candidate info</h4>
				<legend>Basic candidate info</legend>
				
				<!-- BASIC REFERRAL INFO -->
				<li class="page-section-item">
					
					<!-- CARD -->
					<div class="card card-for-inputs">
					<div class="input-note right"><span class="secondary">*</span> Required</div>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<!-- <label for="comment">Name *</label> -->
								<input class="input-title required-basic" id="ref-name" name="ref-name" placeholder="Name *" title="Candidate name">
								<div class="input-note right"></div>
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<!-- <label for="comment">Email *</label> -->
								<input class="required-basic" id="ref-email" name="ref-email" placeholder="Email *" title="Candidate name">
								<div class="input-note right"></div>
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<!-- <label for="comment">Phone *</label> -->
								<input class="" id="ref-phone" name="ref-phone" placeholder="Phone" title="Candidate name">
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container input-select-container">
								<label class="input-question fullopacity" for="ref-role">Which job role best fits the candidate's talent or experience? <span class="secondary">*</span></label>
								<!--<label for="ref-role"></label>-->
								<div class="select-container">
									<select class="required-basic" id="ref-role" name="ref-role" title="Select a role">
										<option value="not sure">Not sure</option>
										<option value="software development">Software development</option>
										<option value="sales">Sales</option>
										<option value="business">Business</option>
										<option value="communications and policy">Communications & Policy</option>
										<option value="data warehousing">Data warehousing</option>
										<option value="finance">Finance</option>
										<option value="hardware development">Hardware development</option>
										<option value="human resources">Human resources</option>
										<option value="legal">Legal</option>
										<option value="marketing">Marketing</option>
										<option value="network eng">Network eng</option>
										<option value="operations">Operations</option>
										<option value="site-reliability eng">Site-reliability eng</option>
										<option value="user experience">User Experience</option>
										<option value="workplace services">Workplace services</option>
										<option value="general or other">General / Other</option>
										
									</select>
									<div class="input-note right"></div>
								</div>
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<div class="input-question">May we use your name to invite the candidate to apply? <span class="secondary">*</span></div>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="required-basic" id="ref-invite-1" name="ref-invite" value="Yes">
									<label class="" for="ref-invite-1">Yes, send them an email</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="required-basic" id="ref-invite-2" name="ref-invite" value="No">
									<label class="" for="ref-invite-2">No, I want to remain anonymous</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
					</div> <!-- end list card -->
				</li>
				
				
				<!-- ////////////////////////////////////////// -->
				<!-- MORE INFO SECTION 'YES, INVITE' + ROLE     -->
				<!-- ////////////////////////////////////////// -->
				
				<li class="page-section-item hidden" id="ref-more-info-A">
					
					<div class="listheader clearfix">
						<h4 class="left">More about the candidate</h4>
						<a href="home-draft.html" class="button right">Save and finish later</a>
					</div>
					<legend>More about the candidate</legend>
					
					<!-- NEW TIME OFF CARD -->
					<div class="card card-for-inputs">
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container input-select-container">
								<label class="input-question fullopacity" for="ref-role">Does the candidate have a specialty within [role selected]? <span class="secondary">*</span></label>
								<!--<label for="ref-role"></label>-->
								<div class="select-container">
									<select class="required-basic" id="ref-role" name="ref-role" title="Select a role">
										<option value="not sure">Not sure</option>
										<option value="software development">Specialty 1</option>
										<option value="sales">Specialty 2</option>
										<option value="business">Specialty 3</option>
										
									</select>
									<div class="input-note right"></div>
								</div>
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<div class="input-question">What's your experience at Google with [role selected]?<span class="secondary"> *</span></div>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-roleexp-1a" name="ref-roleexp" value="">
									<label class="" for="ref-roleexp-1a">I'm very experienced with this role</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-roleexp-2a" name="ref-roleexp" value="">
									<label class="" for="ref-roleexp-2a">I'm somewhat experienced with this role</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-roleexp-3a" name="ref-roleexp" value="">
									<label class="" for="ref-roleexp-3a">I have little to no direct experience with this role</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<div class="input-question">Have you ever worked with the candidate in this role?<span class="secondary"> *</span></div>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-workexp-1a" name="ref-workexp" value="">
									<label class="" for="ref-workexp-1a">Yes, I've worked with them extensively</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-workexp-2a" name="ref-workexp" value="">
									<label class="" for="ref-workexp-2a">Yes, I've worked with them, but not extensively</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-workexp-3a" name="ref-workexp" value="">
									<label class="" for="ref-workexp-3a">No, I've rarely or never worked with them</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<div class="input-question">How well do you know the candidate personally?<span class="secondary"> *</span></div>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-1a" name="ref-personal" value="">
									<label class="" for="ref-personal-1a">We're close friends or family</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-2a" name="ref-personal" value="">
									<label class="" for="ref-personal-2a">We're casual friends</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-3a" name="ref-personal" value="">
									<label class="" for="ref-personal-3a">We've just met or don't know each other</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<div class="input-question">If Google was a 50-person company, would you reserve a spot for this person?<span class="secondary"> *</span></div>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-vouch-1a" name="ref-vouch" value="">
									<label class="" for="ref-vouch-1a">Yes</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-vouch-2a" name="ref-vouch" value="">
									<label class="" for="ref-vouch-2a">Maybe</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-vouch-3a" name="ref-vouch" value="">
									<label class="" for="ref-vouch-3a">Probably not</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-freeform-a">Other important details about the candidate and their work</label>
								<!--<label for="ref-role"></label>-->
								
									<textarea class="" id="ref-freeform-a" name="ref-freeform" placeholder="Optional additional info..."></textarea>
								
							</div>
						</section>
						
						<!-- SUBMIT BUTTONS FOR DESKTOP -->
						<section class="form-section desktop-only">
							<div class="card-button-container right">
								<a class="button button-flat button-secondary" href="home.html">Cancel</a>
								<a class="button button-raised" href="home-submit.html">Submit</a>
							</div>
						</section>
						
					</div> <!-- end list card -->
				</li> <!-- end page section item -->
				
				<!-- /////////////////////////////////////////////   -->
				<!-- MORE INFO SECTION 'YES, EMAIL + NO ROLE'    	 -->
				<!-- /////////////////////////////////////////////   -->
				
				<li class="page-section-item hidden" id="ref-more-info-D">
					
					<div class="listheader clearfix">
						<h4 class="left">More about the candidate</h4>
						<a href="home-draft.html" class="button right">Save and finish later</a>
					</div>
					<legend>More about the candidate</legend>
					
					<!-- NEW TIME OFF CARD -->
					<div class="card card-for-inputs">
						
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-personal-d">How well do you know the candidate personally?<span class="secondary"> *</span></label>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-1d" name="ref-personal-d" value="">
									<label class="" for="ref-personal-1d">We're close friends or family</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-2d" name="ref-personal-d" value="">
									<label class="" for="ref-personal-2d">We're casual friends</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-3d" name="ref-personal-d" value="">
									<label class="" for="ref-personal-3d">We've just met or don't know each other</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
												
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-freeform-d">Other important details about the candidate and their work</label>
								<!--<label for="ref-role"></label>-->
								
									<textarea class="" id="ref-freeform-d" name="ref-freeform" placeholder="Optional additional info..."></textarea>
								
							</div>
						</section>
						
						<!-- SUBMIT BUTTONS FOR DESKTOP -->
						<section class="form-section desktop-only">
							<div class="card-button-container right">
								<a class="button button-flat button-secondary" href="home.html">Cancel</a>
								<a class="button button-raised" href="home-submit.html">Submit</a>
							</div>
						</section>
						
					</div> <!-- end list card -->
				</li> <!-- end page section item -->				
				
				<!-- ///////////////////////////////////// -->
				<!-- MORE INFO SECTION 'NO, ANONYMOUS'     -->
				<!-- ///////////////////////////////////// -->
				
				<li class="page-section-item hidden" id="ref-more-info-B">
					
					<div class="listheader clearfix">
						<h4 class="left">More about the candidate</h4>
						<a href="home-draft.html" class="button right">Save and finish later</a>
					</div>
					<legend>More about the candidate</legend>
					
					<!-- NEW TIME OFF CARD -->
					<div class="card card-for-inputs">
						
						<div class="form-section">
							<p class="instructions"><span class="secondary">NOTE: Staffing only reviews anonymous referrals when there’s a hiring need for their particular profile. So, the candidate may not hear from Staffing for a while. Also, because of privacy, we cannot send you status updates for this candidate should we decide to pursue them.</span><a href=""> Learn more</a></p>
						</div>

						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-url-b">Do you have a link to the candidates LinkedIn, Facebook, or portfolio site?</label>
								<input type="text" name="ref-url-b" id="ref-url" placeholder="Paste URL here..."></input>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container input-button-container">
								<label class="input-question fullopacity" for="ref-resume-b">Do you have the candidate's resumé? (recommended)</label>
								<a class="button button-raised button-secondary" id="ref-resume-b">Upload resumé</a>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container input-select-container">
								<label class="input-question fullopacity" for="ref-role">Does the candidate have a specialty within [role selected]? <span class="secondary">*</span></label>
								<!--<label for="ref-role"></label>-->
								<div class="select-container">
									<select class="required-basic" id="ref-role" name="ref-role" title="Select a role">
										<option value="not sure">Not sure</option>
										<option value="software development">Specialty 1</option>
										<option value="sales">Specialty 2</option>
										<option value="business">Specialty 3</option>
										
									</select>
									<div class="input-note right"></div>
								</div>
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-roleexp-b">What's your experience at Google with [role selected]?</label>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-roleexp-1b" name="ref-roleexp-b" value="">
									<label class="" for="ref-roleexp-1b">I'm very experienced with this role</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-roleexp-2b" name="ref-roleexp-b" value="">
									<label class="" for="ref-roleexp-2b">I'm somewhat experienced with this role</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-roleexp-3b" name="ref-roleexp-b" value="">
									<label class="" for="ref-roleexp-3b">I have little to no direct experience with this role</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-workexp-b">Have you ever worked with the candidate in this role?</label>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-workexp-1b" name="ref-workexp-b" value="">
									<label class="" for="ref-workexp-1b">Yes, I've worked with them extensively</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-workexp-2b" name="ref-workexp-b" value="">
									<label class="" for="ref-workexp-2b">Yes, I've worked with them, but not extensively</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-workexp-3b" name="ref-workexp-b" value="">
									<label class="" for="ref-workexp-3b">No, I've rarely or never worked with them</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question" for="ref-personal-b">How well do you know the candidate personally?</label>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-1b" name="ref-personal-b" value="">
									<label class="" for="ref-personal-1b">We're close friends or family</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-2b" name="ref-personal-b" value="">
									<label class="" for="ref-personal-2b">We're casual friends</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-personal-3b" name="ref-personal-b" value="">
									<label class="" for="ref-personal-3b">We've just met or don't know each other</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-vouch-b">If Google was a 50-person company, would you reserve a spot for this person?</label>
								<!--<label for="ref-role"></label>-->
								<div class="radio-container">
									<input type="radio" class="" id="ref-vouch-1b" name="ref-vouch-b" value="">
									<label class="" for="ref-vouch-1b">Yes</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-vouch-2b" name="ref-vouch-b" value="">
									<label class="" for="ref-vouch-2b">Maybe</label>
								</div>
								<div class="radio-container">
									<input type="radio" class="" id="ref-vouch-3b" name="ref-vouch-b" value="">
									<label class="" for="ref-vouch-3b">Probably not</label>
								</div>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-freeform-b">Other important details about the candidate and their work</label>							
									<textarea class="" id="ref-freeform-b" name="ref-freeform-b" placeholder="Optional additional info..."></textarea>
								
							</div>
						</section>
						
						<!-- SUBMIT BUTTONS FOR DESKTOP -->
						<section class="form-section desktop-only">
							<div class="card-button-container right">
								<a class="button button-flat button-secondary" href="home.html">Cancel</a>
								<a class="button button-raised" href="home-submit.html">Submit</a>
							</div>
						</section>
						
												
					</div> <!-- end list card -->
				</li> <!-- end page section item -->
				
				<!-- /////////////////////////////////////////////   -->
				<!-- MORE INFO SECTION 'NO, ANONYMOUS + NO ROLE'     -->
				<!-- /////////////////////////////////////////////   -->
				
				<li class="page-section-item hidden" id="ref-more-info-C">
					
					<div class="listheader clearfix">
						<h4 class="left">More about the candidate</h4>
						<a href="home-draft.html" class="button right">Save and finish later</a>
					</div>
					<legend>More about the candidate</legend>
					
					<!-- NEW TIME OFF CARD -->
					<div class="card card-for-inputs">
						
						<div class="form-section">
							<p class="instructions"><span class="secondary">NOTE: Staffing only reviews anonymous referrals when there’s a hiring need for their particular profile. So, the candidate may not hear from Staffing for a while. Also, because of privacy, we cannot send you status updates for this candidate should we decide to pursue them.</span><a href=""> Learn more</a></p>
						</div>

						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container">
								<label class="input-question fullopacity" for="ref-url-c">Do you have a link to the candidates LinkedIn, Facebook, or portfolio site?</label>
								<input type="text" name="ref-url" id="ref-url-c" placeholder="Paste URL here..."></input>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- QUESTION -->
						<section class="form-section">
							<div class="input-container input-button-container">
								<label class="input-question fullopacity" for="ref-resume-c">Do you have the candidate's resumé? (recommended)</label>
								<a class="button button-raised button-secondary" id="ref-resume-c">Upload resumé</a>
								<div class="input-note right"></div>
								
							</div>
						</section>
						
						<!-- SUBMIT BUTTONS FOR DESKTOP -->
						<section class="form-section desktop-only">
							<div class="card-button-container right">
								<a class="button button-flat button-secondary" href="home.html">Cancel</a>
								<a class="button button-raised" href="home-submit.html">Submit</a>
							</div>
						</section>
																		
					</div> <!-- end list card -->
				</li> <!-- end page section item -->
				
				<!-- INSTRUCTIONS -->
				<li>
					<div>
						<p class="instructions"><span class="secondary">We'll use your answers to help our recruiters take the savviest action with your referral.</span><a href=""> Learn more about our process</a></p>
					</div>
				<li>
			</ul> <!-- end page sections -->
			
			</fieldset>
			</form>
		
		</div><!-- end column main -->

		
	</div> <!-- end 'primary content' section -->

	
</div><!-- end app wrapper -->

<!-- JAVASCRIPT -->
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$( document ).ready(function() {
		//$( "#ref-name" ).focus();
	});
</script>
<script src="assets/js/referral-form.js" type="text/javascript"></script>

</body>
</html>